<template>
  <kk-relative class="Page W">
    <kk-text class="T1" val="安装说明" />
    <div class="F2" />
    <kk-text class="T2" val="在 main.js 中导入 lib 文件夹中的 kkui.umd.js" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Purple" val="import" />
        <kk-text class="Blue Space" val="kkui" />
        <kk-text class="Purple Space" val="from" />
        <kk-text class="Orange Space" val="'kkui.umd.js'" />
        <div class="F2" />
        <kk-text class="Blues" val="Vue" />
        <kk-text class="Black" val="." />
        <kk-text class="Yellor" val="use" />
        <kk-text class="Black" val="(" />
        <kk-text class="Blue" val="kkui" />
        <kk-text class="Black" val=")" />
      </div>
    </div>
    <div class="F2" />
    <kk-text class="T2" val="若根目录没有 lib 文件夹，则在根目录执行以下命令" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Yellor" val="npm" />
        <kk-text class="Black Space" val="run" />
        <kk-text class="Black Space" val="lib" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="注意事项" />
    <div class="W" v-for="(item,index) in Matters" :key="index">
      <div class="F2" />
      <kk-text class="T2" :val="`${index+1}. ${item}`" />
    </div>

    <div class="W" v-if="!Dev">
      <div class="F1" />
      <kk-text class="T1" val="最后编译时间" />
      <div class="F2" />
      <kk-text class="T2" :val="Version" />
    </div>
  </kk-relative>
</template>

<script>
export default {
  // 页面对象
  data: () => ({
    Dev: process.env.NODE_ENV == "development", // 判断运行环境
    Version: process.env.VUE_APP_VERSION, // 获取编译时间
    Matters: [
      "本组件基于 vue",
      "本组件内部全部的长度单位为 vw",
      "部分与IE不兼容的地方会单独说明",
      "本组件采用 svg 渲染的方式绕过浏览最小字号限制",
      "本组可能对浏览器强制改变字体兼容不佳",
      "尽量不要在本页面复制内容，可能会出现粘贴时换行异常"
    ]
  })
};
</script>